<script>
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import DefaultButton from "./DefaultButton.vue";
import { getServerInfo, clearAllFiles } from "@/api/configure.js";

export default defineComponent({
  name: "OssTable",
  components: {
    DefaultButton,
  },
  props: {
    width: {
      type: String,
      default: "80%",
    },
  },
  setup() {
    const state = reactive({
      currentSelect: -1,
      diskList: [],
      isShow: false,
    });

    onMounted(() => {
      getDiskInfo();
    });

    const getDiskInfo = () => {
      getServerInfo().then((res) => {
        state.diskList = res.data.sysFiles;
      });
    };

    const showClear = () => {
      state.isShow = true;
    };

    const clearAll = () => {
      clearAllFiles().then((res) => {
        ElMessage({
          message: "清空成功",
          type: "success",
          offset: 200,
        });
      });
      state.isShow = false;
    };

    return {
      ...toRefs(state),
      showClear,
      clearAll,
    };
  },
});
</script>

<template>
  <div class="component-oss-table-container" :style="{ width }">
    <div class="box">
      <div class="titleRow">
        <div class="title">硬盘管理</div>
        <div class="clear" @click="showClear">清空</div>
      </div>
      <el-table
        :border="true"
        height="500"
        :data="diskList"
        style="width: 100%"
      >
        <el-table-column prop="dirName" label="磁盘号" />
        <el-table-column prop="total" label="容量" />
        <el-table-column prop="free" label="剩余空间" />
        <el-table-column prop="name" label="状态" />
        <el-table-column prop="typeName" label="类型" />
        <el-table-column prop="sysTypeName" label="属性" />
        <el-table-column prop="usage" label="进度" />
      </el-table>
    </div>

    <el-dialog v-model="isShow" title="删除" width="500">
      <span>是否清空所有文件</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="clearAll"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.component-oss-table-container {
  .box {
    width: 100%;
    height: 600px;
    .titleRow {
      width: 100%;
      height: 50px;
      background-color: #74bcff;
      .title {
        float: left;
        font-size: 18px;
        line-height: 50px;
        margin-left: 30px;
        color: white;
      }

      .clear {
        width: 100px;
        height: 30px;
        background-color: white;
        float: right;
        margin-right: 30px;
        margin-top: 10px;
        line-height: 30px;
        text-align: center;
      }
    }
  }
}
</style>
